import { useState, useEffect } from 'react';
import { Modal, Form, Input, Message } from '@arco-design/web-react';
import { addTags, editTags } from '@/api/tags';
const FormItem = Form.Item;

function addModal(props: {
  propsVisible: boolean;
  selectRow: any;
  changeVisible: (values: boolean) => void;
  fetchData: () => void;
}) {
  const { propsVisible, selectRow, changeVisible, fetchData } = props;
  const [visible, setVisible] = useState(false);
  const [confirmLoading, setConfirmLoading] = useState(false);
  const [title, setTitle] = useState('');
  const [form] = Form.useForm();

  useEffect(() => {
    setVisible(propsVisible);
    selectRow.add ? setTitle('新建标签') : setTitle('编辑标签');
    form.setFieldValue('name', selectRow.name);
  }, [props]);

  function onOk() {
    form.validate().then(async (res) => {
      setConfirmLoading(true);
      if (selectRow.add) {
        try {
          const result: any = await addTags({ ...form.getFields() });
          if (result.code === 200) {
            Message.success(result.msg);
            form.resetFields();
            setVisible(false);
            setConfirmLoading(false);
            changeVisible(false);
            fetchData();
          } else {
            Message.success(result.msg);
            setConfirmLoading(false);
          }
        } catch (error) {
          console.error(error);
        }
      } else {
        if (selectRow.name === form.getFieldValue('name')) {
          setVisible(false);
          setConfirmLoading(false);
          changeVisible(false);
          return;
        }
        const data = selectRow;
        const name = form.getFieldValue('name');
        try {
          const result: any = await editTags({ id: data._id, name: name });
          if (result.code === 200) {
            Message.success(result.msg);
            form.resetFields();
            setVisible(false);
            setConfirmLoading(false);
            changeVisible(false);
            fetchData();
          } else {
            Message.success(result.msg);
            setConfirmLoading(false);
          }
        } catch (error) {
          console.error(error);
        }
      }
    });
  }

  const onCancel = () => {
    form.resetFields();
    setVisible(false);
    changeVisible(false);
  };

  const formItemLayout = {
    labelCol: {
      span: 4,
    },
    wrapperCol: {
      span: 20,
    },
  };

  return (
    <div>
      <Modal
        title={title}
        visible={visible}
        onOk={onOk}
        confirmLoading={confirmLoading}
        onCancel={onCancel}
      >
        <Form
          {...formItemLayout}
          form={form}
          labelCol={{ style: { flexBasis: 80 } }}
          wrapperCol={{ style: { flexBasis: 'calc(100% - 80px)' } }}
        >
          <FormItem
            label="名称"
            field="name"
            rules={[{ required: true, message: '请填写名称' }]}
          >
            <Input placeholder="" />
          </FormItem>
        </Form>
      </Modal>
    </div>
  );
}

export default addModal;
